<template>
	<view class="index">
		<view class='search'>
			<u-search v-model='code_id' placeholder="输入批次号后点击搜索查询" clearabled @clear='clearProduct' @custom='searchInfo' @search='searchInfo'></u-search>
		</view>
		<view class='content'>
			<view class='title1'>质量追溯</view>
			<view class='title2'>追溯每一步，品质更放心</view>
			<view class='collect'>
				<u-collapse v-if='productInfo.code'>
					<u-collapse-item title="">
						<view slot='title'>
							<text class='firstTitle'>{{productInfo.code}}</text>
							<text class='secondTitle'>{{productInfo.jiancheng}}</text>
						</view>
						<view class='collapse-item'>
							<view class='part'>
								<view class='partTitle'>产品名称</view>
								<view class='partVal'>
									<text>{{productInfo.name}}</text>
								</view>
							</view>
							<!-- <view class='part'>
								<view class='partTitle'>出厂检测</view>
								<view class='partVal'>
									<template v-if='productInfo.jianyan_img.length'>
										<image v-for="(item,index) in productInfo.jianyan_img" :key='index' :src="item" mode="widthFix"></image>
									</template>
								</view>
							</view> -->
							<view class='part'>
								<view class='partTitle'>形式检验报告</view>
								<view class='partVal'>
									<template v-if='productInfo.xingshi_img.length'>
										<!-- <image v-for="(item,index) in productInfo.xingshi_img" :key='index' :src="item" mode="widthFix"></image> -->
										<a style='color:#409eff;outline: none;' :href="item" v-for="(item,index) in productInfo.xingshi_img" target='_blank' :key='index'>查看报告</a>
									</template>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>原材料检验报告</view>
								<view class='partVal'>
									<template v-if='productInfo.yuancailiao_img.length'>
										<image v-for="(item,index) in productInfo.yuancailiao_img" :key='index' :src="item" mode="widthFix"></image>
									</template>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>成品照片</view>
								<view class='partVal'>
									<template v-if='productInfo.chengpin_img.length'>
										<image v-for="(item,index) in productInfo.chengpin_img" :key='index' :src="item" mode="widthFix"></image>
									</template>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>生产组装</view>
								<view class='partVal'>
									<template v-if='productInfo.shengchan_img.length'>
										<image v-for="(item,index) in productInfo.shengchan_img" :key='index' :src="item" mode="widthFix"></image>
									</template>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>营业执照</view>
								<view class='partVal'>
									<template v-if='productInfo.yyzz_img.length'>
										<image v-for="(item,index) in productInfo.yyzz_img" :key='index' :src="item" mode="widthFix"></image>
									</template>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>产品颜色</view>
								<view class='partVal'>
									<text>{{productInfo.yanse}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>生产许可证编号</view>
								<view class='partVal'>
									<text>{{productInfo.xuke}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>产品类型</view>
								<view class='partVal'>
									<text>{{productInfo.leixing}}</text>
								</view>
							</view>
							<!-- <view class='part'>
								<view class='partTitle'>产品重量</view>
								<view class='partVal'>
									<text>{{productInfo.zhongliang}}</text>
								</view>
							</view> -->
							<view class='part'>
								<view class='partTitle'>产品规格</view>
								<view class='partVal'>
									<text>{{productInfo.guige}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>生产日期</view>
								<view class='partVal'>
									<text>{{productInfo.riqi}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>质保期限</view>
								<view class='partVal'>
									<text>{{productInfo.zhibao}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>出厂批号</view>
								<view class='partVal'>
									<text>{{productInfo.code}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>批次数量</view>
								<view class='partVal'>
									<text>{{productInfo.shuliang}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>执行标准</view>
								<view class='partVal'>
									<text>{{productInfo.biaozhun}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>联系方式</view>
								<view class='partVal'>
									<text>{{productInfo.lianxi}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>统一社会信用代码</view>
								<view class='partVal'>
									<text>{{productInfo.company_code}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>生产企业</view>
								<view class='partVal'>
									<text>{{productInfo.company_name}}</text>
								</view>
							</view>
							<view class='part'>
								<view class='partTitle'>生产地址</view>
								<view class='partVal'>
									<text>{{productInfo.company_address}}</text>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view class='example imgPublic'>
			<image src="/static/images/mainpic.jpg" mode="widthFix"></image>
		</view>
		<view class="beian">
			鲁ICP备2025141815号-1
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 2501123
				code_id:'',
				cate_id:'',
				productInfo:{
					code:'',
					biaozhun:'',
				}
			}
		},
		onLoad() {
			// 2
			this.cate_id = this.GetQueryValue('cate_id') ? this.GetQueryValue('cate_id') : "";
		},
		
		methods: {
			// 搜索事件
			searchInfo(){
				if(!this.code_id){
					uni.showToast({
						title:'请输入要搜索的批次号',
						icon:"none"
					})
					return;
				}
				uni.showLoading({
					title:'查询中...'
				})
				uni.request({
					url:'http://hat.liansuliao.com/index.php/Api/Info/index',
					method:'POST',
					data:{
						cate_id:parseInt(this.cate_id),
						code_id:parseInt(this.code_id),
					},
					header: {
					    'Content-Type':'application/x-www-form-urlencoded ',
					},
					success: (res) => {
						uni.hideLoading();
						if(res.data.code == 200){
							this.productInfo = res.data.data;
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
							})
						}
					    console.log('请求成功', res);
					},
					fail: (err) => {
					    console.log('请求失败', err);
					},
				})
			},
			clearProduct(){
				this.productInfo = {
					code:'',
					biaozhun:'',
				}
			},
			//获取固定参数的值
			GetQueryValue (queryName) {
				let query = window.location.search.substring(1);
				let vars = query.split("&");
				for (let i = 0; i < vars.length; i++) {
					let pair = vars[i].split("=");
					if (pair[0] == queryName) {
						return pair[1];
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-collapse-item__content{
		height:auto!important;
	}
	.part{
		.partTitle{
			font-size:16px;
			color:#333333;
			margin-bottom:8px;
			font-weight:bold;
		}
		width:100%;
		padding:5px 0 10px;
		border-bottom: 1px solid #e5e5e5;
		margin-bottom:10px;
	}
	.secondTitle{
		display: inline-block;
		font-size:12px;
		margin-left:10px;
		color:#909399;
	}
	.firstTitle{
		display: inline-block;
		font-weight: bold;
	}
	.content{
		.collect{
			width:100%;
			background: white;
			border-radius: 4px;
			margin-top:40px;
		}
		.title1{
			font-size:20px;
			color:white;
			text-align: center;
		}
		.title2{
			margin:12px 0;
			color: white;
			text-align: center;
		}
		width:100%;
		padding:30px 12px 12px;
		box-sizing: border-box;
		background:#2979ff;
	}
	.beian{
		font-size:12px;
		color: #909399;
		width:100%;
		text-align: center;
		padding: 12px 0;
	}
	.example{
		width:100%;
		padding:15px 0;
		box-sizing: border-box;
	}
	.search{
		width:100%;
		padding:10px 12px;
		box-sizing:border-box;
	}
	page{
		background:white
	}
</style>
